<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <title>技术实现</title>
    <link rel="icon" href="../static/img/logoIco.ico" type="image/x-icon"/>
    <script src="../static/js/jquery-1.12.4.js"></script>

    <script src="../static/js/base.js"></script>

    <link rel="stylesheet" href="../static/css/base.css">
    <link rel="stylesheet" href="../static/css/header.css">
    <link rel="stylesheet" href="../static/css/footer.css">

    <style type="text/css">
        .content{
            width: 100%;
            height: 1100px;
        }
        .content .card_list{
            width: 990px;
            /*height: 1725px;*/
            margin: 0 auto;
            margin-top: 190px;
            margin-bottom: 180px;
        }
        .content .card_list .row{
            width: 990px;
            height: 540px;
            display:flex;
            flex-wrap:wrap;
        }

        .content .card_list .row .lab-card{
            width: 300px;
            height: 450px;
            text-align: center;
            margin: 0 15px 125px 15px;
            border: 0 solid #999;
            background-color: #fff;
            transition:all 0.5s;

        }

        /*鼠标放上去放大效果*/
        .content .card_list .row .lab-card:hover{
            box-shadow: 0 0 20px 0 #E5E5E5;
            transform: scale(1.05);
        }

        .content .lab-card .lab-card-img{
            width: 300px;
            padding-top: 20px;
            height: 200px;
        }
        .content .lab-card .lab-card-img img{
            width: 180px;
            height: 180px;
        }

        .content .lab-card .lab-card-body{
            width: 300px;
            height: 240px;
            overflow:hidden;
        }

        .content .lab-card .lab-card-body .lab-card-title{
            line-height: 27px;
            text-align: center;
            opacity: 0.9;
            font-size: 18px;
            color: #000;
            padding-top: 10px;
            padding-bottom: 20px;
        }

        .content .lab-card .lab-card-body .lab-card-desc{
            height: 135px;
            font-size: 14px;
            text-align: justify;
            color: #000;
            opacity: 0.7;
            margin-left: 30px;
            margin-right: 30px;
            overflow:hidden;
            box-sizing: border-box;
        }

    </style>

</head>
<body>
<script>
    $(function () {

        // 注册提示
        var $timer;

        // 接收后端的数据
        var result = {{ result | safe }};
        userstatu = result.userstatu;

        //登陆成功
        if(userstatu == 1){
            username = result.username;

            console.log('username:'+username);
            $('.nav_user').css('display','inline-block');
            $('.nav_right').css('display','none');
            $('.user_welcome').text(username);
        }


        $('.colse').click(function () {
            // $('.nav_user').css('display','none');
            // $('.nav_right').css('display','flex');
            window.location.href="http://127.0.0.1:8000/";
        })

    })
</script>

<!--网页头部-->
<div class="header">
    <div class="header_left">
        <a href="../index"><div class="logo"></div></a>
        <div class="header_title">一带一路 电商影响因素识别系统</div>
    </div>
    <div class="header_right">
        <ul class="nav_left">
            <a href="../textMining"><li>文本挖掘</li></a>
            <a href="../dataAnalysis"><li>大数据分析</li></a>
            <a href="../tech"><li>技术实现</li></a>
            <a href="../projectDesc"><li>项目介绍</li></a>
            <a href="../selfCenter"><li>个人简介</li></a>
        </ul>

        <!--登录注册-->
        <ul class="nav_right">
            <a href="/"><li class="login">登录</li></a>
            <a href="../register"><li class="register">注册</li></a>
        </ul>

        <!--用户登录成功-->
        <form method="post">
            {% csrf_token %}

            <ul class="nav_user">
                <li class="user_img">
                    <ul class="sub">

                        <!--<li><a href="">设置</a></li>-->
                        <li class="colse" name="close" value="1">退出</li>

                    </ul>
                </li>
                <li class="user_welcome"></li>
            </ul>
        </form>
    </div>
</div>

<!-- 内容区域 -->
<div class="content">
        <div class="card_list">

            <div class="row">
                <a href="https://baike.baidu.com/item/%E7%BD%91%E7%BB%9C%E7%88%AC%E8%99%AB" target="_blank">
                <div class="lab-card">
                    <div class="lab-card-img">
                        <img src="../static/img/tech-1.png"/>
                    </div>
                    <div class="lab-card-body">
                        <div class="lab-card-title">Python 爬虫</div>
                        <div class="lab-card-desc">
                            将一个网页字符串进行解析，可以按照我们的要求来提取出我们有用的信息，也可以根据DOM树的解析方式来解析。网页解析器有正则表达式成字符串通过模糊匹配的方式来提取有价值插件，html.parser进行解析。
                            </div>

                    </div>
                </div>
                </a>

                <a href="https://baike.baidu.com/item/html5" target="_blank">
                <div class="lab-card">
                    <div class="lab-card-img">
                        <img src="../static/img/tech-2.png"/>
                    </div>
                    <div class="lab-card-body">
                        <div class="lab-card-title">HTML5</div>
                        <div class="lab-card-desc">
                            万维网上的一个超媒体文档称之为一个页面。在逻辑上将视为一个整体的一系列页是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。
                            </div>

                    </div>
                </div>
                </a>

                <a href="https://baike.baidu.com/item/jQuery" target="_blank">
                <div class="lab-card">
                    <div class="lab-card-img">
                        <img src="../static/img/tech-3.png"/>
                    </div>
                    <div class="lab-card-body">
                        <div class="lab-card-title">jQuery</div>
                        <div class="lab-card-desc">
                            jQuery是一个快速、简洁的JavaScript框架，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
                            </div>
                    </div>
                </div>
                </a>

            </div>

            <!-- 第二行卡片     -->
            <div class="row">

                <a href="https://baike.baidu.com/item/%E8%AF%8D%E4%BA%91/6952822" target="_blank">
                <div class="lab-card">
                    <div class="lab-card-img">
                        <img src="../static/img/tech-4.png"/>
                    </div>
                    <div class="lab-card-body">
                        <div class="lab-card-title">词云分析</div>
                        <div class="lab-card-desc">“词云”这个概念由美国西北大学新闻学副教授、新媒体专业主任里奇·戈登于近日提出。戈登做过编辑、记者，曾担任迈阿密先驱报新媒体版的主任。也是最好的传播方式高的“关键词”予以视觉上的突出。
                            </div>

                    </div>
                </div>
                </a>

                <a href="https://baike.baidu.com/item/%E7%AE%97%E6%B3%95%E6%8F%8F%E8%BF%B0" target="_blank">
                <div class="lab-card">
                    <div class="lab-card-img">
                        <img src="../static/img/tech-5.png"/>
                    </div>
                    <div class="lab-card-body">
                        <div class="lab-card-title">算法描述</div>
                        <div class="lab-card-desc">算法描述是指对设计出的算法，用一种方式进行详细的描述，以便与人交流。算法可采用多种描述语言来描述，各种描述语言在对问题的描述能力方面存在一定的差异，可以使用自然语言、伪代码，也可使用程序流程图.
                            </div>

                    </div>
                </div>
                </a>

                <a href="https://baike.baidu.com/item/%E6%96%87%E6%9C%AC%E6%8C%96%E6%8E%98" target="_blank">
                <div class="lab-card">
                    <div class="lab-card-img">
                        <img src="../static/img/tech-6.png"/>
                    </div>
                    <div class="lab-card-body">
                        <div class="lab-card-title">文本挖掘</div>
                        <div class="lab-card-desc">从各种各样的文档格式的数据中或从插入的OLE对象中，完全除掉特殊控制信息，快速抽出纯文本数据信息。便于用户实现对多种文档数据资源信息进行统一管理，编辑，检索和浏览。</div>
                    </div>
                </div>
                </a>

            </div>


            </div>


        </div>

<!--网页底部-->
<div class="footer">
    <div class="top">

        <span class="QRcode"><img src="../static/img/QRcode.jpg"/> </span>
        <a href="#"><div class="goback">回到顶部</div></a>

    </div>
    <div class="down">
        <div class="selfInfo">
            <a href="../selfCenter">个人简介</a>
            |
            <a href="../projectDesc">项目介绍</a>
        </div>
        <div class="copyright">
            copyright@2017-2020 陈薇
        </div>
    </div>
</div>
</body>
</html>